import { CSSRuleObject, styled } from "styledfc";
import img from "./img";
import Header from "@/components/Header";
import Main from "@/components/Main";
import PetCard from "@/components/PetCard";
import { FlexCss } from "../../utils/styledfc";
import { PetCardType } from "../Index/components/HotList";
import { getCollectLog, toggleCollect } from "@/api";
import { useEffect, useState } from "react";
export default function index() {
    const bool = localStorage.getItem("pet-userInfo");
    const [collectList, setCollectList] = useState<Partial<PetCardType>[]>([]);
    const id = !!bool ? JSON.parse(bool).id : null;
    const resetData = () => {
        getCollectLog(id).then(({ data }: any) => {
            setCollectList(
                data.map((item: { [key in string]: any }): PetCardType => {
                    return {
                        englishName: item.pet_engName,
                        life: item.pet_life,
                        name: item.pet_name,
                        img: item.pet_coverURL,
                        collect: true,
                        id: item.id,
                    };
                })
            );
        });
    };
    useEffect(() => {
        if (!id) return;
        resetData();
    }, []);
    const changeCollect = async (did: number) => {
        await toggleCollect(id, did);
        setCollectList(collectList.filter((item) => item.id !== did));
    };
    return (
        <div className={indexStyle.className}>
            <Header h2="Collection" h1="Friend" img={img.collectHeader} />
            <Main>
                <ul>
                    {collectList.map((item) => (
                        <PetCard changeCollect={changeCollect} key={item.englishName} item={item as PetCardType}></PetCard>
                    ))}
                </ul>
            </Main>
        </div>
    );
}
const indexStyle = styled({
    fontSize: "16rem",
    backgroundColor: "#a1b275",
    "& ul": {
        paddingTop: "30rem",
        minHeight: "calc( 100vh - 250rem)",
        ...(FlexCss("center", "flex-start", "column") as CSSRuleObject),
    },
});
